<!DOCTYPE html><html>
    <head>
         <style type="text/css">
            #div{
            width: 400px;
            height: 400px;
            border: 3px solid black;
            margin: 0 auto;/*使父盒子居中*/
            position: relative;/*父盒子没有添加定位时，子盒子div1如图8-28所示:
            父盒子添加定位后，子盒子div1 如图8-30所示*/
            }
            #div1{
            width: 200px;
            height:200px;
            background-color: yellow;
            position:fixed;
            /*对 div1进行绝对定位*/
            top: 50px;
            left: 150px;
            }
            #div2{
            /*作为对比元素*/
            width: 200px;
            height: 200px;
            background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="div">
        <div id="div1">进行固定定位的元素div1</div>
        <div id="div2">作为对比的元素div2</div>
    </div>
    </body>
</html>
    